<template>
	<div class="relative leading-[0px]">
		<!-- 单行 -->
		<input
			class="border-gray-200 dark:border-zinc-600 dark:bg-zinc-800 duration-100 dark:text-zinc-400 border outline-none py-0.5 px-1 text-sm rounded-sm focus:border-blue-400 w-full"
			v-if="type === 'text'"
			type="text"
			v-model="text"
			:maxlength="max"
		/>
		<!-- 多行 -->
		<textarea
			class="border-gray-200 dark:border-zinc-600 dark:bg-zinc-800 duration-100 dark:text-zinc-400 border outline-none py-0.5 px-1 text-sm rounded-sm focus:border-blue-400 w-full"
			v-if="type === 'textarea'"
			v-model="text"
			:maxlength="max"
			rows="5"
		></textarea>
		<span
			v-if="max"
			:class="{ 'text-red-700': currentNumber === parseInt(max) }"
			class="absolute right-1 bottom-0.5 text-zinc-400 text-xs"
			>{{ currentNumber }} / {{ max }}
		</span>
	</div>
</template>

<script setup>
import { useVModel } from '@vueuse/core'
import { computed } from 'vue'

const props = defineProps({
	modelValue: String,
	type: {
		type: String,
		default: 'text',
		validator: (val) => {
			const res = ['text', 'textarea'].includes(val)
			if (!res) {
				throw new Error('type must be text or textarea')
			}
			return res
		},
	},
	max: String | Number,
})

const emits = defineEmits(['update:modelValue'])
const text = useVModel(props)

const currentNumber = computed(() => {
	return text.value.length
})
</script>

<style scoped lang="scss"></style>
